import React, { Component, Fragment } from 'react';
import { Form, Input, Radio, Upload, Button, message, Descriptions, Select, Spin } from 'antd'
import { UploadOutlined } from '@ant-design/icons';
import { connect } from 'dva';
const { Option } = Select;

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 12 },
};

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

const functionalMaterialsArr = ["生活垃圾", "农业废物", "工业固体废物", "危险废弃物", "其他"]
const technologyCategoryArr = ["固废分离技术", "循环再利用技术", "减少污染", "分类回收", "其他"]

class QualificationExaminationPage extends Component {
    constructor(props) {
        super(props),
            this.state = {
                isRepeatIdHidden: true,
                repeatIdRules: ''
            }
    }

    componentDidMount(){
        this.props.dispatch({
            type:"application/setLoading",
            data:false
        })
    }

    onFinish = values => {
        if (!this.props.user.id) {
            message.error("请先登录技术提供方账号！")
            return
        }
        let formData = new FormData()
        formData.append("userId", this.props.user.id)
        formData.append("companyAddress", values.companyAddress)
        formData.append("email", values.email)
        formData.append("companyName", values.companyName)
        formData.append("companyNature", values.companyNature)
        formData.append("contacts", values.contacts)
        formData.append("idNumber", values.idNumber)
        formData.append("innovationDescription", values.innovationDescription)
        formData.append("isStatue", values.isStatue)
        formData.append("legalRepresentative", values.legalRepresentative)
        formData.append("operatingConditions", values.operatingConditions)
        formData.append("phone", values.phone)
        formData.append("postalCode", values.postalCode)
        formData.append("technologyAlternatives", values.technologyAlternatives)
        formData.append("technologyName", values.technologyName)
        formData.append("technologyCategory", values.technologyCategory)
        formData.append("functionalMaterials", values.functionalMaterials)
        formData.append("technologyPrinciple", values.technologyPrinciple)
        formData.append("technologyTarget", values.technologyTarget)
        formData.append("isRepeat", values.isRepeat)
        formData.append("socialCreditCode", values.socialCreditCode)
        values.isRepeat ? formData.append("RepeatId", values.RepeatId) : formData.append("RepeatId", -1)
        formData.append("regulation", values.regulation.file)
        formData.append("technicalStandard", values.technicalStandard.file)
        formData.append("referenceMaterial", values.referenceMaterial.file)

        this.props.dispatch({
            type: "application/qualificationExamination",
            data: formData
        })
    }

    onFinishFailedRegister = () => {
        message.error("提交失败！")
    }

    regulationBeforeUpload = (file, fileList) => {
        return false
    }

    technicalStandardBeforeUpload = (file, fileList) => {
        return false
    }

    referenceMaterialBeforeUpload = (file, fileList) => {
        return false
    }

    changeRepeatIdItem = e => {
        if (e.target.value == 1) {
            this.setState({
                isRepeatIdHidden: false,
                repeatIdRules: [{ required: true, message: '请输入编号!' }]
            })
        }

        if (e.target.value == 0) {
            this.setState({
                isRepeatIdHidden: true,
                repeatIdRules: ''
            })
        }
    }

    render() {
        return (
            <Spin spinning={this.props.applicationLoading}>
                <Fragment>
                    <Form
                        {...layout}
                        name="register"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                    >
                        <h1>基本信息</h1>
                        <Form.Item
                            label="单位全称"
                            name="companyName"
                            rules={[{ required: true, message: '请输入单位全称!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="单位性质"
                            name="companyNature"
                            rules={[{ required: true, message: '请输入单位性质!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="地址"
                            name="companyAddress"
                            rules={[{ required: true, message: '请输入地址!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="邮政编码"
                            name="postalCode"
                            rules={[{ required: true, message: '请输入邮政编码!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="法人代表"
                            name="legalRepresentative"
                            rules={[{ required: true, message: '请输入法人代表!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="统一社会信用代码"
                            name="socialCreditCode"
                            rules={[{ required: true, message: '请输入统一社会信用代码!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="联系人"
                            name="contacts"
                            rules={[{ required: true, message: '请输入联系人!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="联系方式"
                            name="phone"
                            rules={[{ required: true, message: '请输入联系方式!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="身份证号码"
                            name="idNumber"
                            rules={[{ required: true, message: '请输入身份证号码!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="邮箱"
                            name="email"
                            rules={[{ required: true, message: '请输入邮箱!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <h1>技术信息</h1>
                        <Form.Item
                            label="技术名称"
                            name="technologyName"
                            rules={[{ required: true, message: '请输入技术名称!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="技术目的"
                            name="technologyTarget"
                            rules={[{ required: true, message: '请输入技术目的!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="作用材料"
                            name="functionalMaterials"
                            rules={[{ required: true, message: '请选择作用材料!' }]}
                        >
                            <Select>
                                {functionalMaterialsArr.map((item, index) => {
                                    return (
                                        <Option key={index + 1}>{item}</Option>
                                    )
                                })}
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="技术种类"
                            name="technologyCategory"
                            rules={[{ required: true, message: '请选择技术种类!' }]}
                        >
                            <Select>
                                {technologyCategoryArr.map((item, index) => {
                                    return (
                                        <Option key={index + 1}>{item}</Option>
                                    )
                                })}
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="技术原理"
                            name="technologyPrinciple"
                            rules={[{ required: true, message: '请输入技术原理!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="技术的相关代替方案"
                            name="technologyAlternatives"
                            rules={[{ required: true, message: '请输入技术的相关代替方案!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="技术操作条件"
                            name="operatingConditions"
                            rules={[{ required: true, message: '技术操作条件!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="创新的描述"
                            name="innovationDescription"
                            rules={[{ required: true, message: '请输入邮箱!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="是否提交过相同或是相似的技术验证"
                            name="isRepeat"
                            rules={[{ required: true, message: '请选择是否提交过!' }]}
                        >
                            <Radio.Group
                                onChange={this.changeRepeatIdItem}
                            >
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </Radio.Group>
                        </Form.Item>

                        <Form.Item
                            label="请提供相同或相似的技术验证编号"
                            name="RepeatId"
                            rules={this.state.repeatIdRules}
                            hidden={this.state.isRepeatIdHidden}
                        >
                            <Input />
                        </Form.Item>

                        <h1>技术合规性</h1>

                        <Form.Item
                            label="技术是否符合目标市场的法规要求"
                            name="isStatue"
                            rules={[{ required: true, message: '请选择是否符合!' }]}
                        >
                            <Radio.Group>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </Radio.Group>
                        </Form.Item>

                        <Form.Item
                            label="请提供该技术目标市场涉及的法律规章"
                            name="regulation"
                            rules={[{ required: true, message: '请选择文件!' }]}
                        >
                            <Upload
                                maxCount="1"
                                beforeUpload={this.regulationBeforeUpload}
                            >
                                <Button icon={<UploadOutlined />}>选择文件</Button>
                            </Upload>
                        </Form.Item>

                        <Form.Item
                            label="请提供该技术目标市场涉及的技术标准"
                            name="technicalStandard"
                            rules={[{ required: true, message: '请选择文件!' }]}
                        >
                            <Upload
                                maxCount="1"
                                beforeUpload={this.technicalStandardBeforeUpload}
                            >
                                <Button icon={<UploadOutlined />}>选择文件</Button>
                            </Upload>
                        </Form.Item>

                        <Form.Item
                            label="请提供适用于本技术的参考资料"
                            name="referenceMaterial"
                            rules={[{ required: true, message: '请选择文件!' }]}
                        >
                            <Upload
                                maxCount="1"
                                beforeUpload={this.referenceMaterialBeforeUpload}
                            >
                                <Button icon={<UploadOutlined />}>选择文件</Button>
                            </Upload>
                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                                提交
                        </Button>
                        </Form.Item>

                    </Form>
                </Fragment>
            </Spin>
        )
    }
}

const mapStateToProps = state => {
    let user = state.app.user
    let applicationLoading = state.loading.effects['application/qualificationExamination'] || false
    return {
        user,
        applicationLoading
    }
}

export default connect(mapStateToProps)(QualificationExaminationPage)